<app:account-edit-page page-title='Badge'>
<div class='account-block account-badge'>
<div class='choose-symbol' ng:if='!AccountBadge.data.type'>
<h4>Choose your symbol:</h4>
<div class='symbol' ng:repeat='type in AccountBadge.types'>
<img app:badge-src='{type: type, color1: AccountBadge.data.color1, color2: AccountBadge.data.color2, color3: AccountBadge.data.color3, param: 0, flip: false}' auto-watch height='50px' ng:click='AccountBadge.selectSymbol(type)' width='50px'>
</div>
<div class='symbol' ng-if='Me().customBadge'>
<img app:badge-src='{type: Me().customBadge, color1: AccountBadge.data.color1, color2: AccountBadge.data.color2, color3: AccountBadge.data.color3, param: 0, flip: false}' auto-watch height='50px' ng:click='AccountBadge.selectSymbol(Me().customBadge)' width='50px'>
</div>
<div class='symbol' ng-repeat='decoration in AccountBadge.decorations'>
<img app:badge-src='{type: decoration.decoration.badge, color1: AccountBadge.data.color1, color2: AccountBadge.data.color2, color3: AccountBadge.data.color3, param: 0, flip: false}' auto-watch height='50px' ng:click='AccountBadge.selectSymbol(decoration.decoration.badge)' width='50px'>
</div>
</div>
<div class='customize-symbol' ng:if='AccountBadge.data.type'>
<div class='row'>
<div class='symbol-preview'>
<div class='preview-line'>
<div class='symbol'>
<img app:badge-src='AccountBadge.data' auto-watch>
</div>
</div>
<div class='game-objects'>
<div class='preview-line'>
<div class='game-object-lg'>
<app:game-spawn display-options='{}' object-data='{x: 0, y: 0, energyCapacity: 100, energy: AccountBadge.energy, user: 0}' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-spawn>
</div>
<div class='game-object-md'>
<app:game-spawn display-options='{}' object-data='{x: 0, y: 0, energyCapacity: 100, energy: AccountBadge.energy, user: 0}' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-spawn>
</div>
<div class='game-object-xs'>
<app:game-spawn display-options='{}' object-data='{x: 0, y: 0, energyCapacity: 100, energy: AccountBadge.energy, user: 0}' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-spawn>
</div>
</div>
<div class='preview-line'>
<div class='game-object-lg'>
<app:game-creep display-options='{}' object-data='AccountBadge.creep' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-creep>
</div>
<div class='game-object-md'>
<app:game-creep display-options='{}' object-data='AccountBadge.creep' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-creep>
</div>
<div class='game-object-xs'>
<app:game-creep display-options='{}' object-data='AccountBadge.creep' player='0' users='{0: {badge: AccountBadge.data}}'></app:game-creep>
</div>
</div>
</div>
</div>
<div class='symbol-controls'>
<div class='symbol-controls-item' ng-if='_.isNumber(AccountBadge.data.type)'>
<div class='account-note'>Shape</div>
<div class='symbol-controls-value'>
<div ng:class="{'col-xs-8': AccountBadge.pathInfo().flip, 'col-xs-12': !AccountBadge.pathInfo().flip}">
<md-slider max='100' min='-100' ng:model='AccountBadge.data.param'></md-slider>
</div>
<div class='col-xs-4' ng:if='AccountBadge.pathInfo().flip'>
<md-checkbox ng:model='AccountBadge.data.flip'>
Flip
</md-checkbox>
</div>
</div>
</div>
<div class='symbol-controls-item'>
<div class='account-note'>Color 1</div>
<div class='symbol-controls-value'>
<spectrum-colorpicker ng-model='AccountBadge.data.color1' options="{showInput: true, preferredFormat: 'hex'}"></spectrum-colorpicker>
</div>
</div>
<div class='symbol-controls-item'>
<div class='account-note'>Color 2</div>
<div class='symbol-controls-value'>
<spectrum-colorpicker ng-model='AccountBadge.data.color2' options="{showInput: true, preferredFormat: 'hex'}"></spectrum-colorpicker>
</div>
</div>
<div class='symbol-controls-item'>
<div class='account-note'>Color 3</div>
<div class='symbol-controls-value'>
<spectrum-colorpicker ng-model='AccountBadge.data.color3' options="{showInput: true, preferredFormat: 'hex'}"></spectrum-colorpicker>
</div>
</div>
</div>
</div>
</div>
<div class='account-controls'>
<div class='pull-left'>
<md:button class='md-raised' ng:click='AccountBadge.randomize()'>Random badge</md:button>
</div>
<div class='pull-right'>
<md:button class='md-primary md-hue-1' ng:href="#!{{'top.account' | routeSegmentUrlStateless}}">Cancel</md:button>
<span ng:if='AccountBadge.data.type'>
<md:button class='md-primary md-hue-1' ng:click='AccountBadge.resetSymbol()' type='button'>Change symbol</md:button>
<md:button app:click-animated='AccountBadge.save()' class='md-primary md-raised' type='button'>Save</md:button>
</span>
</div>
</div>
</div>
</app:account-edit-page>
<script id='symbol-color-palette' type='text/ng-template'>
<section class='symbol-color-palette'>
<div class='color' ng:class='{active: color.index == SymbolColorPalette.model}' ng:click='SymbolColorPalette.model = color.index' ng:repeat='color in SymbolColorPalette.colors' ng:style="{'background-color': color.rgb}"></div>
</section>
</script>
